<template>
	<div class="about">
		<h1>添加菜品</h1>
		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
			:size="formSize">
			<el-form-item label="菜品名称" prop="dishesName">
				<el-input v-model="ruleForm.dishesName"></el-input>
			</el-form-item>
			<el-form-item label="店铺名称" prop="shopName">
				<el-select v-model="ruleForm.shopId" placeholder="店铺名称">
					<el-option v-for="(item) in ruleForm.shopArray" :key="item" :label="item.shopName"
						:value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="菜品类型" prop="dishesTypeId">
				<el-select v-model="ruleForm.dishesTypeId" placeholder="菜品类型">
					<el-option v-for="(item) in ruleForm.dishesTypeNameArray" :key="item" :label="item.typeOfDishes"
						:value="item.id"></el-option>
				</el-select>
			</el-form-item>


			<el-form-item label="菜品图片" prop="dishesPhotoOrVideoUrl">
				<!-- 上传图片 -->
				<!-- action是请求提交的地址 -->
				<!-- :data="{'id':user.id}" -->
				<el-upload class="avatar-uploader" action="/dishes/upload" :headers="headers" :show-file-list="false"
					:on-success="handleAvatarSuccess" style="display: inline-block;width: 300px">
					<!-- <el-button v-model="ruleForm.dishesPhotoOrVideoUrl">上传图片</el-button> -->
					<img v-if="dishesPhotoOrVideoUrl" :src="ruleForm.dishesPhotoOrVideoUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon">
						<!-- 显示头像 -->
						<el-row class="demo-avatar demo-basic">
							<el-col :span="12">
								<div class="demo-basic--circle">
									<div class="block">
										<!-- 头像路径  -->
										<el-avatar shape="square" :size="200" :src="ruleForm.dishesPhotoOrVideoUrl">
											上传图片
										</el-avatar>
									</div>
								</div>
							</el-col>
						</el-row>
					</i>
				</el-upload>

			</el-form-item>
			<el-form-item label="标题" prop="title">
				<el-input v-model="ruleForm.title"></el-input>
			</el-form-item>
			<el-form-item label="掌柜描述" prop="shopkeeperDescription">
				<el-input v-model="ruleForm.shopkeeperDescription" placeholder="本套餐含有米饭"></el-input>
			</el-form-item>
			<el-form-item label="主要原料">
				<el-input v-model="ruleForm.mainIngredient"></el-input>
			</el-form-item>
			<el-form-item label="分量">
				<el-input v-model="ruleForm.weight" placeholder="一人份, 约300克"></el-input>
			</el-form-item>
			<el-form-item label="口味">
				<el-input v-model="ruleForm.taste"></el-input>
			</el-form-item>
			<el-form-item label="价格" prop="price">
				<el-input v-model="ruleForm.price"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="addDishes(ruleFormRef)">提交</el-button>
				<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	import qs from 'qs'
	import storage from '@/utils/localstorage.js'
	export default {
		name: "AddDishes",
		data() {
			return {
				headers: {
					userId: storage.get("userId"),
					token: storage.get("token")
				},
				ruleForm: {
					shopArray:[],
					dishesName: '',
					dishesTypeNameArray: [],
					dishesPhotoOrVideoUrl: '',
					dishesTypeId: '',
					title: '',
					shopkeeperDescription: '',
					mainIngredient: '',
					weight: '',
					taste: '',
					price: '',
				},
				rules: {
					dishesName: [{
							required: true,
							message: '请输入菜品名称',
							trigger: 'blur',
						},
						{
							min: 2,
							max: 10,
							message: '长度最少是2,最多是10',
							trigger: 'blur',
						},
					],
					title: {
						required: true,
						message: '请输入标题',
						trigger: 'blur',
					},
					price: {
						required: true,
						message: '请输入价格',
						trigger: 'change',
					},
				}
			}
		},
		mounted() {
			this.getDishesTypeList();
			this.getShopNameList();
		},
		methods: {
			//获取菜品类型名称
			getDishesTypeList() {
				this.$axios.get('/dishes/type/page')
					.then(res => {
						this.ruleForm.dishesTypeNameArray = res.data.records;
					}).catch(e => {
						this.$message({
							message: e,
							type: 'warning'
						})
					})
			},
			//获取店铺名称名称
			getShopNameList() {
				this.$axios.get('/shop/list')
					.then(res => {
						this.ruleForm.shopArray = res.data;
					}).catch(e => {
						this.$message({
							message: e,
							type: 'warning'
						})
					})
			},
			addDishes() {
				if (!this.ruleForm.dishesName) {
					//已经全局加载了element-plus
					this.$message({
						message: "你还没有输入菜名"
					})
					return;
				}
				if (!this.ruleForm.price) {
					// alert("");
					//已经全局加载了element-plus
					this.$message({
						message: "你还没有输入价格"
					})
					return;
				}
				this.$axios.post('/dishes/insert', qs.stringify(this.ruleForm))
					.then(res => {
						if (res.data) {
							this.$message({
								message: "添加成功",
								type: 'success'
							})
							this.$router.push("/dishesList")
						} else {
							this.$message({
								message: "添加失败",
								type: 'warning'
							})
						}
					}).catch(e => {
						this.$message({
							message: e,
							type: 'warning'
						})
					})
			},
			//处理头像成功
			handleAvatarSuccess(res, file) {
				console.log("res=" + res + ",file=" + file);
				this.$axios.get('/dishes/url')
					.then(res => {
						this.ruleForm.dishesPhotoOrVideoUrl = res.data;
						console.log(this.ruleForm.dishesPhotoOrVideoUrl);
					}).catch(e => {
						this.$message({
							message: e,
							type: 'warning'
						})
					})
				//刷新当前页面
				// location.reload();
			},

		}
	}
</script>
